.popup-type {
  height                 : 500px;
  background-color       : #f5f5f5;
  border-top-left-radius : 10px;
  border-top-right-radius: 10px;

  .header {
    position        : sticky;
    top             : 0;
    left            : 0;
    z-index         : 1000;
    width           : 100%;
    height          : 56px;
    text-align      : center;
    font-size       : 14px;
    line-height     : 56px;
    color           : rgba(0, 0, 0, 0.9);
    background-color: #fff;

    .cross {
      position : absolute;
      right    : 10px;
      top      : 50%;
      font-size: 20px;
      transform: translateY(-50%);
      color    : rgba(0, 0, 0, 0.6);
    }
  }

  .content {
    padding: 20px;

    .all {
      display         : inline-block;
      padding         : 12px 20px;
      font-size       : 16px;
      color           : rgba(0, 0, 0, 0.9);
      background-color: #fff;
    }

    .title {
      color    : rgba(0, 0, 0, 0.9);
      margin   : 10px 0;
      font-size: 14px;
    }

    .expense-wrap,
    .income-wrap {
      display        : flex;
      justify-content: space-between;
      flex-wrap      : wrap;

      p {
        width           : calc(~"(100% - 20px) / 3");
        text-align      : center;
        padding         : 12px 0;
        margin-bottom   : 10px;
        background-color: #fff;
        font-size       : 16px;
      }
    }

    .active {
      background-color: #007fff !important;
      color           : #fff;
    }
  }
}